import React, { useState } from "react";
import {
    Input,
    InputGroup,
    Button,
    FormControl,
    Link,
    Box,
    useToast,
    Stack,
    InputLeftElement
} from "@chakra-ui/react";
import styled from '@emotion/styled'
import { AiOutlineMail } from 'react-icons/ai'
import { FaUserAlt, FaLock } from "react-icons/fa";
import { Form, Formik, Field, } from 'formik'
import * as Yup from 'yup'
import { signUp } from '../services/login'

const Tip = styled.p`
  margin: 10px 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: #969696;
  a {
    color: #3194d0;
  }
`

const Login = () => {
    const [loading, setLoading] = useState(false)
    const toast = useToast({ status: "error", position: "top" })
    const validateSchema = Yup.object({
        username: Yup.string().required('请输入用户名'),
        password: Yup.string().min(6, '密码长度不能小于6').required('请输入密码'),
        email: Yup.string().email('请输入正确的邮箱').required('请输入邮箱'),
    })
    const user = {
        username: '',
        password: '',
        email:''
    }
    const handleValidate = async values => {
        try {
            await validateSchema.validate(values)
            return true
        } catch (error) {
            toast({ description: error.message })
            return false
        }
    }
    // 表单提交
    const handleSubmit = async (values) => {
        const valid = await handleValidate(values)
        if (!valid) return
        setLoading(true)
        const { data } = await signUp(values)
        setLoading(false)
        console.log(data)
    }
    return (
        <Box fontSize="sm" color="gray.600">
            <Formik
                initialValues={user}
                onSubmit={handleSubmit}
            >
                <Form>
                    <Stack spacing="2">
                        <Field name="username">
                            {({ field, form }) => (
                                <FormControl>
                                    <InputGroup>
                                        <InputLeftElement
                                            pointerEvents="none"
                                            children={<FaUserAlt color="gray.300" />}
                                        />
                                        <Input {...field} type="tel" id="username" placeholder="你的昵称" />
                                    </InputGroup>
                                </FormControl>
                            )}
                        </Field>
                        <Field name="email">
                            {({ field, form }) => (
                                <FormControl>
                                    <InputGroup>
                                        <InputLeftElement
                                            pointerEvents="none"
                                            children={<AiOutlineMail color="gray.300" />}
                                        />
                                        <Input {...field} type="tel" id="email" placeholder="你的邮箱" />
                                    </InputGroup>
                                </FormControl>
                            )}
                        </Field>
                        <Field name="password">
                            {({ field, form }) => (
                                <FormControl>
                                    <InputGroup>
                                        <InputLeftElement
                                            pointerEvents="none"
                                            children={<FaLock color="gray.300" />}
                                        />
                                        <Input {...field} type="password" id="password" placeholder="请输入密码" />
                                    </InputGroup>
                                </FormControl>
                            )}
                        </Field>
                        <Button isLoading={loading} type="submit" mt="20px" w="100%" h="44px" colorScheme="teal" borderRadius="22px">注册</Button>
                        <Tip>
                            点击 “注册” 即表示您同意并愿意遵守简书
            <br />
                            <Link>
                                用户协议
            </Link>
            和
            <Link>隐私政策</Link>。
          </Tip>
                    </Stack>
                </Form>
            </Formik>
        </Box>
    )
}

export default Login